.

iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0

每天的專案會同步到 GitLab 上,可以前往 GitLab 查看,有興趣的朋友歡迎留言 or 來信討論,我的信箱是 nickchen1998@gmail.com

這篇文章將帶大家透過 Streamlit 快速構建一個簡易的問答機器人,讓我們可以輕鬆地與模型互動。Streamlit 是一個專門用於快速構建資料應用和機器學習應用的開源框架,其最大特色在於不需要繁雜的前端設計,就可以用 Python 程式碼創建即時的互動式應用,非常適合原型開發和小型專案展示。

在開始之前,請先確保已經安裝了 Streamlit。如果尚未安裝,您可以使用以下命令來安裝:

pip install streamlit

這個範例分為三個主要部分:側邊選單、問答頁面以及對話紀錄。以下將逐步說明這三個部分的功能與邏輯。

Sidebar 側邊選單

首先,我們透過 st.sidebar 在應用程式的左側建立一個選單,讓使用者選擇不同的資料集,以決定問答的主題範疇。程式碼如下:

import streamlit as st

st.sidebar.title("選擇資料集")
dataset_option = st.sidebar.selectbox(
    "請選擇在問答時要使用的資料集...",
    ("肝膽腸胃", "家庭醫學")
)

這段程式碼使用 st.sidebar 建立了側邊欄標題,並使用 selectbox 讓使用者選擇不同的資料集。在實際應用中,可以根據選擇的資料集來決定 AI 回答的內容,讓系統能針對不同的醫學領域提供專業回答。這樣的選單可以讓問答系統更加靈活,適應不同的使用需求。

sidebar

問答頁面主體 (Main Chat Page)

主頁面展示了一個簡單的問答機器人界面,包含標題和訊息輸入欄位。當使用者輸入訊息後,程式會將訊息和 AI 回應保存至對話歷史中,並顯示在頁面上。以下是這部分的程式碼:

import streamlit as st

st.title("問答機器人")

prompt = st.chat_input("請輸入您的訊息...")

if prompt:
    st.session_state['history'].append({"role": "user", "content": prompt})
    ai_response = "Hello 👋"
    st.session_state['history'].append({"role": "ai", "content": ai_response})

這段程式碼包含三個主要功能:

  1. 標題設置:透過 st.title("問答機器人") 設定主頁面的標題為「問答機器人」。

  2. 訊息輸入框st.chat_input("請輸入您的訊息...") 提供了一個輸入框讓使用者輸入問題或訊息。一旦輸入完成並發送後,輸入框會觸發下方的回應處理邏輯。

  3. 訊息處理與回應:當偵測到有新輸入 (if prompt:) 時,程式將該訊息添加至 st.session_state['history'],並將角色設為 user。接著生成一個簡單的 AI 回應(此處為固定的 "Hello 👋"),並將這段回應添加至對話歷史。每次的對話記錄都會保存在 st.session_state['history'] 中,確保每次輸入後的歷史對話都可以保留在畫面上。

透過這段程式碼,使用者可以輸入訊息並接收到機器人回應。未來若要擴充回應邏輯,可以在 ai_response 的部分進行更進階的 AI 模型集成。

qapage

Chat History 對話紀錄

最後一部分是對話紀錄管理,透過 st.session_state['history'] 來保存每次問答的歷史。每當使用者發送新訊息時,程式會將對話歷史更新並顯示:

import streamlit as st

if 'history' not in st.session_state:
    st.session_state['history'] = []

prompt = st.chat_input("請輸入您的訊息...")

if prompt:
    st.session_state['history'].append({"role": "user", "content": prompt})
    ai_response = "Hello 👋"
    st.session_state['history'].append({"role": "ai", "content": ai_response})

for message in st.session_state['history']:
    if message['role'] == 'user':
        with st.chat_message("user"):
            st.write(message['content'])
    elif message['role'] == 'ai':
        with st.chat_message("ai"):
            st.write(message['content'])

history qa

關於 st.session_state

st.session_state 是 Streamlit 提供的一個重要物件,用來在使用者每次互動或刷新畫面時,保持應用程式中的變數狀態。因為 Streamlit 每次刷新畫面都會重新運行程式碼,所以若沒有使用 st.session_state,對話紀錄等資訊將會被重置。透過將 history 存放於 st.session_state,我們可以保留每次的訊息紀錄,確保使用者與機器人的對話可以延續下去,而不會隨畫面刷新而消失。

這段程式碼首先檢查 session_state 中是否已有對話紀錄的 history,如果沒有則初始化空列表。當使用者輸入新訊息時,系統會將該訊息存入歷史中,並生成 AI 回應加入紀錄。最後使用 for 迴圈遍歷對話歷史,依據訊息角色(使用者或 AI)顯示不同的對話框,這樣能夠呈現整體對話的順序,讓畫面更加清晰。

完整介面示範

在上面三個部分的組合下,我們可以獲得一個簡易的問答機器人界面,讓使用者透過側邊選單選擇主題,並在主頁面進行問答互動,所有對話將顯示在頁面上。下方可以插入一張完整介面的截圖,供讀者更全面地理解應用外觀。

all

透過 Streamlit 簡單明瞭的架構,我們成功建立了一個互動性良好的問答機器人原型。未來可以加入更複雜的 AI 回應邏輯,或結合外部資料來提升問答準確度,使應用更具實用性。希望這篇文章對於初學者在 Streamlit 的應用開發上有所幫助。

內容預告

今天我們快速介紹了 Streamlit 明天我們要來規劃一下我們未來幾天要實作出的簡易站台。


上一篇
Day 20 - GraphRAG 與 RAG 技術整合的未來
下一篇
Day 22 - 站台架構設計
系列文
初探 Langchain 與 LLM:打造簡易問診機器人30
圖片
  直播研討會

尚未有邦友留言

立即登入留言